<!-- 个人中心 -->
<template>
	<view class="container">

		<view class="order-data">
			<view>
				<view class="grid col-2 ">
					<view class="data-item" v-for="(item,index) in personList"
						@click="goPage('/pages/jewel/classmateDetail?id=' + item.id)">
						<view class="avatar">
							<image mode="widthFix" style="width: 100%;height: 400rpx;" :src="item.img_main"></image>
						</view>
						<view class="person-name">{{item.user_name}}</view>
						<view class="person-diwei">{{item.introduce?item.introduce:''}}</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personList: [
					// {
					// 	id: 0,
					// 	img: '../../static/image/zb7.png',
					// 	name: '史洪岳',
					// 	diwei:'中国珠宝玉石首饰行业协会史洪岳秘书长'
					// },
					// {
					// 	id: 1,
					// 	img: '../../static/image/zb8.png',
					// 	name: '徐德明',
					// 	diwei:'中国珠宝玉石首饰行业协会史徐德明会长'
					// },
					// {
					// 	id: 2,
					// 	img: '../../static/image/zb9.png',
					// 	name: '杨晓华',
					// 	diwei:'中国珠宝玉石首饰行业协会史洪岳秘书长'
					// },
					// {
					// 	id: 3,
					// 	img: '../../static/image/zb10.png',
					// 	name: '史洪岳',
					// 	diwei:'中国珠宝玉石首饰行业协会史洪岳秘书长'	
					// },
					//                {
					//                	id: 4,
					//                	img: '../../static/image/zb9.png',
					//                	name: '杨晓华',
					//                	diwei:'中国珠宝玉石首饰行业协会史洪岳秘书长'
					//                },

				]
			};

		},
		onLoad() {},
		onShow() {
			this.getData()
		},
		computed: {

		},
		methods: {
			getData() {
				this.$api.trainList({
					type: 2
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						this.personList = res.data
					}
				});
			},
		},
	}
</script>
<style>
	page {
		height: 100% !important;
		min-height: 100% !important;
		background: #F5F5F5 !important;
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.container {
		// background: #F5F5F5;
		// height: 100vh;
	}



	.order-data {
		padding: 30rpx;
	}

	.bj {
		background-size: 100% 100%;
		// width: 336rpx;
		height: 280rpx;
		background-image: url('/static/image/zb6.png');
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.margin-bottom {
		margin-bottom: 30rpx;
	}

	.text-center {
		text-align: center;
	}

	.grid.col-2>view {
		width: 48%;

	}

	.padding {
		padding: 30rpx;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.title {
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		color: #FFFFFF;
		text-align: center;
	}

	.qi {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		color: #FFFFFF;
		text-align: center;
		margin-top: 20rpx;
	}

	.xia {
		margin-top: 26rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 32rpx;
		display: flex;
		flex-direction: column;
		// width: 336rpx;
	}

	.name {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.ti {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 10rpx;
	}

	.data-item {
		margin-top: 20rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: #FFFFFF;
		height: 558rpx;
	}

	.bm {
		height: 48rpx;
		background: #FF2C2C;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 16rpx;
	}

	.person-name {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		margin-top: 26rpx;
		margin-left: 20rpx;
	}

	.person-diwei {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 14rpx;
		margin-left: 20rpx;
	}
</style>